<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>接口管理与测试</title>
  <style>
    .container {
      display: flex;
    }
    .sidebar {
      width: 200px;
      background-color: #f0f0f0;
      padding: 20px;
    }
    .main {
      flex: 1;
      padding: 20px;
    }
    .interface-form {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .interface-form input, .interface-form select, .interface-form textarea {
      margin-right: 10px;
    }
    .response {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#" onclick="showInterfacePage()">接口管理</a></li>
      <li><a href="#" onclick="showTestPage()">个人中心</a></li>
    </ul>
  </div>
  <div class="main">
    <div id="interfacePage">
      <h2>接口管理</h2>
      <div id="interfaceList">
        <!-- 这里用来展示接口列表 -->
      </div>
      <div class="interface-form">
        <input type="text" id="interfaceName" placeholder="接口名称">
        <select id="requestType" onchange="showRequestBody(this)">
          <option value="GET">GET</option>
          <option value="POST">POST</option>
          <option value="DELETE">DELETE</option>
          <option value="PUT">PUT</option>
        </select>
        <input type="text" id="url" placeholder="请求URL">
        <textarea id="requestBody" placeholder="请求体" style="display: none;"></textarea><br><br>
        <button onclick="addInterface()">保存</button>
      </div>
      <div class="response" id="response"></div>
    </div>
    <div id="testPage" style="display: none;">
      <h2>个人中心</h2>
      <div>
        <h2>个人信息</h2>
      </div>
      <div id="personalInfo" style="display: none;">
        <p>姓名：zhangsan</p>
        <p>微信：zhangsan123</p>
        <p>电话：13512345678</p>
        <p>QQ：123456789</p>
        <p>邮箱：zhangsan@example.com</p>
      </div>
      <button onclick="showPersonalInfo()">查看个人信息</button>
      <div>
        <h2>账户信息</h2>
      </div>
      <div id="accountInfo" style="display: none;">
        <p>账户：zhangsan123</p>
        <p>密码：********</p>
        <p>电话号码：13512345678</p>
        <p>验证码：1234</p>
      </div>
      <button onclick="showAccountInfo()">查看账户信息</button>
    </div>
  </div>
</div>
<script>
  let interfaces = [];
  function showInterfacePage() {
    document.getElementById("interfacePage").style.display = "block";
    document.getElementById("testPage").style.display = "none";
  }
  function showTestPage() {
    document.getElementById("interfacePage").style.display = "none";
    document.getElementById("testPage").style.display = "block";
  }
  function showRequestBody(selectElement) {
    const requestBody = document.getElementById("requestBody");
    if (selectElement.value === "POST") {
      requestBody.style.display = "block";
    } else {
      requestBody.style.display = "none";
    }
  }
  function addInterface() {
    const interfaceName = document.getElementById("interfaceName").value;
    const requestType = document.getElementById("requestType").value;
    const url = document.getElementById("url").value;
    const requestBody = document.getElementById("requestBody").value;
    interfaces.push({ name: interfaceName, type: requestType, url: url, body: requestBody });
    renderInterfaces();
  }
  function renderInterfaces() {
    const interfaceList = document.getElementById("interfaceList");
    interfaceList.innerHTML = "";
    interfaces.forEach((interface, index) => {
      const div = document.createElement("div");
      div.innerHTML = `
                    <input type="checkbox" id="interface${index}">
                    <label for="interface${index}">${interface.name} - ${interface.type} - ${interface.url}</label>
                    <button onclick="executeInterface(${index})">执行</button>
                    <button onclick="deleteInterface(${index})">删除</button>
                `;
      interfaceList.appendChild(div);
    });
  }
  function executeInterface(index) {
    // 这里模拟发送请求以及展示响应结果
    const response = `接口${interfaces[index].name} 请求成功`;
    document.getElementById("response").innerText = response;
  }
  function deleteInterface(index) {
    interfaces.splice(index, 1);
    renderInterfaces();
  }
  function showPersonalInfo() {
    var personalInfo = document.getElementById("personalInfo");
    personalInfo.style.display = "block";
  }
  function showAccountInfo() {
    var accountInfo = document.getElementById("accountInfo");
    accountInfo.style.display = "block";
  }
</script>
</body>
</html>